<template>
    <div class="swipe">
        <van-swipe class="swipeList" :autoplay="3000" lazy-render :show-indicators="false">
            <van-swipe-item v-for="item in props.swipeData" :key="item">
                <img :src="item.url" />
            </van-swipe-item>
            <!-- 自定义指示器 -->
            <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            </template>
        </van-swipe>
    </div>
</template>

<script setup>
const props = defineProps({
    swipeData: {
        type: Array,
        default: () => []
    }
})
</script>

<style lang="less" scoped>
.swipe {

    .swipeList {
        img {
            width: 100%;
        }

        .custom-indicator {
            position: absolute;
            right: 5px;
            bottom: 5px;
            padding: 2px 5px;
            font-size: 12px;
            background: rgba(0, 0, 0, 0.1);
            margin-right: 5px;
            margin-bottom: 5px;
            color: #fff;
        }
    }
}
</style>